<template>
  <ScaleBox :width="1920" :height="1080" bgc="transparent" :delay="100">
    <div class="w-full h-full flex flex-col bg-white my-2">
      <!-- 标题栏 -->
      <div class="h-14 flex items-center justify-between px-4 border-b-2 border-gray-100   mx-2 mb-1">
        <div class="flex items-center">
          <el-button class="back-btn" @click="goBack">
            <el-icon><ArrowLeft /></el-icon>
            <span>{{ $t('common.fanhui') }}</span>
          </el-button>
        </div>
        <div class="flex-1 h-[1px] bg-gradient-to-l from-indigo-200 via-indigo-100/50 to-transparent"></div>

        <div class="flex items-center gap-0">
          <div class="flex items-center justify-center w-8 h-8 rounded-lg bg-blue-50">
            <el-icon class="text-xl text-blue-700"><DataLine /></el-icon>
          </div>
          <div class="flex items-center w-full">
            <div class="text-xl font-bold bg-gradient-to-r from-blue-800 to-blue-600 bg-clip-text text-transparent mx-4">
              {{ $t('mes.materialInfoSummary') }}
            </div>
          </div>
        </div>
        <div class="flex-1 h-[1px] bg-gradient-to-l to-indigo-200 via-indigo-100/50 from-transparent"></div>

        <div class="w-20"></div>
      </div>

      <!-- 主要内容区域 -->
      <div class="flex-1 min-h-0 px-2 ">
        <div class="h-[calc(50%-0.5rem)] flex mb-2">
          <div class="h-full w-1/2 mr-2  shadow  shadow-gray-400 hover:shadow-sky-500/40">
            <semi-finished></semi-finished>
          </div>
          <div class="h-full w-1/2 shadow shadow-gray-400 hover:shadow-indigo-500/40">
            <raw-material></raw-material>
          </div>
        </div>
        <div class="h-[calc(50%-1rem)] flex">
          <div class="h-full w-1/2 mr-2 shadow shadow-gray-400 hover:shadow-indigo-500/40">
            <out-and-in-bound></out-and-in-bound>
          </div>
          <div class="h-full w-1/2 shadow  shadow-gray-400 hover:shadow-indigo-500/40">
            <documents-total></documents-total>
          </div>
        </div>
      </div>
    </div>
  </ScaleBox>
</template>

<script setup>
import '@/style/tailwind.css'
import '@/assets/font/iconfont.css'
import ScaleBox from 'vue3-scale-box'
import documentsTotal from './components/documentsTotal.vue'
import outAndInBound from './components/outAndInBound.vue'
import rawMaterial from './components/rawMaterial.vue'
import semiFinished from './components/semiFinished.vue'
import { ArrowLeft, DataLine } from '@element-plus/icons-vue'
import router from '@/router'

const goBack = () => {
  router.push('/transferQuantity')
}
</script>

<style scoped lang="scss">
:deep(.el-form) {
  height: 18px;
  display: flex;
  justify-content: center;
}

@keyframes gradient {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

@keyframes blink {
  0%, 100% {
    opacity: 1; /* 完全可见 */
  }
  50% {
    opacity: 0.5; /* 半透明 */
  }
}

.active-button {
  background-color: #626aef;
  color: #ffffff;
}

.inactive-button {
  color: #626aef;
  background-color: #ffffff;
}

.dynamic-text {
  font-size: 38px;
  font-weight: bold;
  background: linear-gradient(270deg, #120101, #01350b, #162c02);
  background-size: 300% 300%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: gradient 3s ease infinite, blink 1s infinite; /* 应用渐变和闪烁动画 */
}

.card-box, .card-box2 {
  background-image: url("@/assets/images/bgcard.png");
  background-size: cover; /* 使背景图像覆盖整个元素 */
  background-position: center; /* 使背景图像居中 */
  background-repeat: no-repeat; /* 不重复背景图像 */
  padding-left: 30px;
  padding-top: 30px;
}

.card-box2 {
  transform: scaleX(-1);
  transform: scaleY(-1);
  padding-top: 26px;
}

.text-box {
  transform: scaleX(-1);
  transform: scaleY(-1);
  padding-top: 15px;
}

.table-list {
  :deep(.el-table) {
    // 表格hover效果
    tbody tr:hover > td {
      background-color: #f8fafc !important;
    }

    // 斑马纹样式
    .bg-gray-50 td {
      background-color: #f8fafc;
    }

    // 单元格过渡动画
    td {
      transition: background-color 0.2s ease;
    }

    // 表格边框
    --el-table-border-color: #e2e8f0;

    // 去除表格底部边框
    &::before {
      display: none;
    }

    //.incomplete {
    //  td {
    //    background: linear-gradient(to bottom, rgb(214, 242, 254) 0%, rgb(194, 225, 254) 100%) !important; /* 从上到下的渐变 */
    //  }
    //  // 确保鼠标悬停时也保持背景色
    //  &:hover > td {
    //    background: linear-gradient(to bottom, rgb(214, 242, 254) 0%, rgb(194, 225, 254) 100%) !important; /* 从上到下的渐变 */
    //  }
    //}
  }

  // 分页器样式优化
  :deep(.custom-pagination) {
    --el-pagination-bg-color: #fff;
    --el-pagination-hover-color: #1e293b;
    --el-pagination-button-color: #64748b;
    --el-pagination-border-radius: 4px;

    .btn-prev, .btn-next {
      background: linear-gradient(to bottom, #f8fafc, #f1f5f9);
      border: 1px solid #e2e8f0;
      color: #64748b;
      margin: 0 4px;

      &:hover:not(:disabled) {
        color: #1e293b;
        border-color: #cbd5e1;
      }

      &:disabled {
        background: #f1f5f9;
        border-color: #e2e8f0;
      }
    }

    .el-pager {
      li {
        background: linear-gradient(to bottom, #f8fafc, #f1f5f9);
        border: 1px solid #e2e8f0;
        color: #64748b;
        margin: 0 2px;
        font-weight: normal;

        &:not(.is-disabled):hover {
          color: #1e293b;
          border-color: #cbd5e1;
        }

        &.is-active {
          background: #1e293b;
          border-color: #1e293b;
          color: white;
        }
      }
    }

    .el-pagination__total {
      color: #64748b;
      margin-right: 8px;
    }
  }

  // 添加搜索框相关样式
  :deep(.search-form) {

    .el-form-item {
      margin-bottom: 0;
      margin-right: 16px;

      &:last-child {
        margin-right: 0;
      }
    }

    .el-form-item__label {
      color: #64748b;
      font-weight: normal;
    }

    .custom-input {
      .el-input__wrapper {
        background: linear-gradient(to bottom, #f8fafc, #f1f5f9);
        border: 1px solid #e2e8f0;
        box-shadow: none !important;

        &:hover {
          border-color: #cbd5e1;
        }

        &.is-focus {
          border-color: #1e293b;
        }
      }

      .el-input__inner {
        color: #1e293b;

        &::placeholder {
          color: #94a3b8;
        }
      }

      .el-input__suffix {
        color: #64748b;

        &:hover {
          color: #1e293b;
        }
      }
    }

    .custom-date-picker {
      .el-input__wrapper {
        background: linear-gradient(to bottom, #f8fafc, #f1f5f9);
        border: 1px solid #e2e8f0;
        box-shadow: none !important;

        &:hover {
          border-color: #cbd5e1;
        }

        &.is-focus {
          border-color: #1e293b;
        }
      }

      .el-input__inner {
        color: #1e293b;

        &::placeholder {
          color: #94a3b8;
        }
      }

      .el-range-separator {
        color: #64748b;
      }

      .el-input__suffix {
        color: #64748b;

        &:hover {
          color: #1e293b;
        }
      }
    }
  }
}

.back-btn {
  background: linear-gradient(to right, #2f6aec, #1e88e5);
  border: none;
  color: white;
  padding: 8px 20px;
  border-radius: 6px;
  font-weight: 500;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  gap: 8px;
  box-shadow: 0 2px 6px rgba(47, 106, 236, 0.2);

  .el-icon {
    font-size: 16px;
    transition: transform 0.3s ease;
  }

  &:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(47, 106, 236, 0.3);
    background: linear-gradient(to right, #3d7af0, #2196f3);

    .el-icon {
      transform: translateX(-4px);
    }
  }
}

// 添加标题动画效果
@keyframes gradient {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

.text-xl {
  background-size: 200% auto;
  animation: gradient 3s ease infinite;
}
</style>

